import { history } from '@umijs/max';
import { Card, message, QRCode, Radio, Spin, Tooltip, Button } from 'antd';
import React, { useEffect, useState } from 'react';

import Alipay from "@/components/Icon/Alipay";
import WxPay from "@/components/Icon/WxPay";
import { valueLength } from "@/pages/User/UserInfo";
import {
  createOrderUsingPOST,
  getProductOrderByIdUsingGET
} from "@/services/qiApi-backend/orderController";
import { useParams } from "@@/exports";
import ProCard from "@ant-design/pro-card";
import wechat from "../../../../public/assets/WeChat.jpg";

const PayOrder: React.FC = () => {
  const [loading, setLoading] = useState<boolean>(false);
  const [order, setOrder] = useState<API.ProductOrderVo>();
  const [total, setTotal] = useState<any>("0.00");
  const [status, setStatus] = useState<string>('active');
  const [payType, setPayType] = useState<string>();
  const urlParams = new URL(window.location.href).searchParams;
  const codeUrl = urlParams.get("codeUrl")
  const urlPayType = urlParams.get("payType")
  const [qrCode, setQrCode] = useState<any>('暂未选择支付方式');
  const params = useParams()

  const createOrder = async () => {
    setLoading(true)
    setStatus("loading")
    const res = await createOrderUsingPOST({productId: params.id, payType: payType})
    if (res.code === 0 && res.data) {
      setOrder(res.data)
      setTotal((res.data.total) / 100)
      setStatus("active")
      setLoading(false)
      setQrCode(res.data.codeUrl)
    }
    if (res.code === 50001) {
      history.back()
    }
  }

  const handlePaymentConfirm = () => {
    message.success({
      content: (
        <div>
          <p>您已成功支付！</p>
          <p>若未到账，请联系管理员增加油币</p>
        </div>
      ),
      duration: 5
    });
    // 3秒后自动跳转
    setTimeout(() => {
      const urlParams = new URL(window.location.href).searchParams;
      history.push(urlParams.get('redirect') || '/account/center');
    }, 3000);
  };

  // ... 其他方法保持不变 ...

  return (
    <>
      <Card style={{ minWidth: 385 }}>
        <Spin spinning={loading}>
          {/* ... 其他部分保持不变 ... */}
          <Card title={'支付二维码'}>
            <br />
            <ProCard style={{ marginTop: -30 }} layout={'center'}>
              <QRCode
                errorLevel="H"
                size={240}
                value={qrCode}
                status={status}
                onRefresh={() => {
                  if (!payType) {
                    message.error('请先选择支付方式');
                    return;
                  }
                  createOrder();
                }}
              />
            </ProCard>
            <ProCard
              style={{
                marginTop: -30,
                color: '#f55f4e',
                fontSize: 22,
                display: 'flex',
                fontWeight: 'bold',
              }}
              layout={'center'}
            >
              ￥{total}
            </ProCard>
            <ProCard style={{ marginTop: 20 }} layout={'center'}>
              <Button
                type="primary"
                size="large"
                onClick={handlePaymentConfirm}
                style={{ width: '80%' }}
              >
                我已成功支付
              </Button>
            </ProCard>
            <ProCard style={{ marginTop: 20 }} layout={'center'}>
              <span>
                本商品为虚拟内容，购买后不支持<strong style={{ color: 'red' }}>退换</strong>
                。确认支付表示您已阅读并接受
                <a
                  target={'_blank'}
                  href={
                    'https://gitee.com/qimu6/statement/blob/master/%E6%9F%92%E6%9C%A8%E6%8E%A5%E5%8F%A3%E7%94%A8%E6%88%B7%E5%8D%8F%E8%AE%AE.md#%E6%9F%92%E6%9C%A8%E6%8E%A5%E5%8F%A3%E7%94%A8%E6%88%B7%E5%8D%8F%E8%AE%AE'
                  }
                  rel="noreferrer"
                >
                  {' '}
                  用户协议{' '}
                </a>
                如付款成功后10分钟后未到账，请联系站长微信：
                <Tooltip
                  placement="bottom"
                  title={<img src={wechat} alt="微信 code_nav" width="120" />}
                >
                  <a>irestarter</a>
                </Tooltip>
              </span>
            </ProCard>
          </Card>
        </Spin>
      </Card>
    </>
  );
}

export default PayOrder;
